<template>
  <div>
    <p style="font-size:14px;color:#66b1ff;text-decoration:underline;cursor:pointer;" @click="addAddress">新增地址</p>
    <el-card class="box-card" v-for="item in addresslist" style="margin-top:10px;">
      <div slot="header" class="clearfix">
        <span>收货信息</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="del(item.id)">删除</el-button>
       <!--  <el-button style="float: right; padding: 3px 0;margin-right: 20px" type="text" @click="edit">编辑</el-button> -->
      </div>
      <div class="text item">
        收货人: {{item.receiver}}
      </div>
      <div class="text item">
        联系电话: {{item.telephone}}
      </div>
      <div class="text item" style="line-height:30px;">
        收货地址: {{item.province_name}} {{item.city_name}} {{item.district_name}} {{item.area_name}} {{item.address}}
      </div>
    </el-card>
    <el-dialog
          title="新增地址"
          :visible.sync="dialogVisible"
          :close-on-click-modal="false">
            <el-form ref="form"  :rules="rules" :model="form" label-width="140px" style="margin-top:30px;">
              <el-form-item label="收货人姓名" prop="consignee">
                <el-input v-model="form.consignee" placeholder="请输入收货人姓名"></el-input>
              </el-form-item>
              <el-form-item label="收货人手机号" prop="telephone">
                <el-input v-model="form.telephone" placeholder="请输入收货人手机号"></el-input>
              </el-form-item>

              <el-form-item label="收货地址">
                <el-row>
                  <el-col :span="6">
                    <el-form-item prop="province_id">
                      <el-select v-model="form.province_id" clearable placeholder="请选择省" @change="getRegion($event, 'city', provinceList.find(item => { return item.region_id === $event}))">
                        <el-option :label="item.region_name" :value="item.region_id" v-for="item in provinceList"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" v-if="form.province_id" >
                    <el-form-item prop="city_id">
                      <el-select v-model="form.city_id" clearable placeholder="请选择市"  @change="getRegion($event, 'district', cityList.find(item => { return item.region_id === $event}))">
                        <el-option :label="item.region_name" :value="item.region_id" v-for="item in cityList"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" v-if="form.city_id">
                    <el-form-item prop="district_id">
                      <el-select v-model="form.district_id" clearable placeholder="请选择区" @change="getRegion($event, 'area', districtList.find(item => { return item.region_id === $event}))">
                        <el-option :label="item.region_name" :value="item.region_id" v-for="item in districtList"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" v-if="form.district_id">
                    <el-form-item prop="area_id">
                      <el-select v-model="form.area_id" clearable placeholder="请选择街道" @change="getRegion($event, '', areaList.find(item => { return item.region_id === $event}))">
                        <el-option :label="item.region_name" :value="item.region_id" v-for="item in areaList"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="详细收货地址" prop="address">
                <el-input v-model="form.address" placeholder="请输入收货人详细地址"></el-input>
              </el-form-item>
            </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addBtn">确 定</el-button>
          </span>
        </el-dialog>
  </div>

</template>

<script>
import {addressList,deladdress,region,addAddress } from '../../../api/ajax'
export default {
  name: 'goodsReceivingInfo',
  data () {
    return {
      dialogVisible: false,
      addresslist:[],
      provinceList: [],
      cityList: [],
      districtList: [],
      areaList: [],
      form: {
        consignee: '',
        telephone: '',
        province_id: '',
        city_id: '',
        district_id: '',
        area_id: '',
        address: '',
        address_id:'',
        area_name: '',
        city_name: '',
        district_name: '',
        province_name: '',
      },
      rules: {
        consignee: [
          { required: true, message: '请输入收货人姓名', trigger: 'blur' },
        ],
        telephone: [
          { required: true, message: '请输入收货人手机号', trigger: 'blur' },
        ],
        province_id: [
          { required: true, message: '请选择省', trigger: 'blur' },
        ],
        city_id: [
          { required: true, message: '请选择市', trigger: 'blur' },
        ],
        district_id: [
          { required: true, message: '请选择区', trigger: 'blur' },
        ],
        area_id: [
          { required: true, message: '请选择街道', trigger: 'blur' },
        ],
        address: [
          { required: true, message: '请输入详细收货地址', trigger: 'blur' },
        ],
      },
    }
  },
  mounted(){
      this.getRegion(1, 'province');
      this.getAddList();
    },
  methods: {
    getRegion(e, type,obj) {
        console.log(obj)
        region({
          parent: e,
        }).then(res => {
          if (res.data.code === 1) {
            if (type === 'province') {
              for (let i in res.data.data.regions) {
                this.provinceList.push(res.data.data.regions[i]);
              }
              this.form.city_id = '';
              this.form.district_id = '';
              this.form.area_id = '';
            }
            if (type === 'city') {
              for (let i in res.data.data.regions) {
                this.cityList.push(res.data.data.regions[i]);
              }
              this.form.city_id = '';
              this.form.district_id = '';
              this.form.area_id = '';
              this.form.province_name = obj.region_name;
            }
            if (type === 'district') {
              for (let i in res.data.data.regions) {
                this.districtList.push(res.data.data.regions[i]);
              }
              this.form.district_id = '';
              this.form.area_id = '';
              this.form.city_name = obj.region_name;
            }
            if (type === 'area') {
              for (let i in res.data.data.regions) {
                this.areaList.push(res.data.data.regions[i]);
              }
              this.form.area_id = '';
              this.form.district_name = obj.region_name;
            } else {
              this.form.area_name = obj.region_name;

            }
          }
        })
      },
    getAddList(){
        addressList().then(res => {
          console.log(res);
          this.addresslist = res.data.data;
        })
      },
    del (id) {
      this.$confirm('是否删除地址?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deladdress({
          address_id:id
        }).then(res => {
          console.log(res);
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getAddList();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    addBtn(){
        this.$refs.form.validate((valid) => {
          if (valid) {
            console.log(this.form);
            let params = {
              receiver: this.form.consignee,
              telephone: this.form.telephone,
              province_id: this.form.province_id,
              city_id: this.form.city_id,
              district_id: this.form.district_id,
              area_id: this.form.area_id,
              address: this.form.address,
              address_id: this.form.address_id,
              area_name: this.form.area_name,
              city_name: this.form.city_name,
              district_name: this.form.district_name,
              province_name: this.form.province_name
            }
            addAddress(params).then(res => {
              console.log(res);
              this.$message({
                type: 'success',
                message: '添加成功!'
              })
              this.dialogVisible = false;
              this.getAddList();
            })
          }
        })
      },
      addAddress(){
        this.dialogVisible = true;
        this.form = {
          consignee: '',
          telephone: '',
          province_id: '',
          city_id: '',
          district_id: '',
          area_id: '',
          address: '',
          address_id:'',
          area_name: '',
          city_name: '',
          district_name: '',
          province_name: '',
        }
      },
  }
}
</script>

<style scoped lang="less">
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
</style>
